<template>
  <view class="lists">
    <!--    <scroll-view
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      scroll-y="true"
      class="scroll-Y scroll"
      id="view1"
    > -->
    <BaseChart v-if="type === 'height'" :empi="userInfo.empi" :chartInfo="heightInfo" id="height" />
    <BaseChart
      v-else-if="type === 'weight'"
      :empi="userInfo.empi"
      :chartInfo="weightInfo"
      id="weight"
    />
    <BaseChart v-else-if="type === 'bmi'" :empi="userInfo.empi" :chartInfo="bmiInfo" id="bmi" />
    <BaseChart v-else-if="type === 'whr'" :empi="userInfo.empi" :chartInfo="whrInfo" id="whr" />
    <BloodInfo v-else-if="type === 'sbp'" :empi="userInfo.empi" :type="type" id="sbp" />
    <BaseChart
      v-else-if="type === 'heart_rate'"
      :empi="userInfo.empi"
      :chartInfo="heartInfo"
      id="heart_rate"
    />
    <BloodSugarInfo v-else-if="type === 'fbg'" :empi="userInfo.empi" :type="type" id="fbg" />
    <BaseChart
      v-else-if="type === 'spo2'"
      :empi="userInfo.empi"
      :chartInfo="oxygenInfo"
      id="spo2"
    />
    <NewBaseInfo
      v-else-if="type === 'blood_ketone'"
      :empi="userInfo.empi"
      :chartInfo="ketoneInfo"
      id="blood_ketone"
    />
    <NewBaseInfo
      v-else-if="type === 'uric_acid'"
      :empi="userInfo.empi"
      :chartInfo="uricAcidInfo"
      id="uric_acid"
    />
    <SleepBaseInfo
      v-else-if="type === 'sleep'"
      :empi="userInfo.empi"
      :chartInfo="sleepInfo"
      id="sleep"
      chartType="column"
    />
    <NewBaseInfo
      v-else-if="type === 'water'"
      :empi="userInfo.empi"
      :chartInfo="waterInfo"
      id="water"
    />
    <NewBaseInfo
      v-else-if="type === 'blood_fat'"
      :empi="userInfo.empi"
      :chartInfo="bloodFatInfo"
      id="blood_fat"
    />
    <NewBaseInfo
      v-else-if="type === 'liver_function'"
      :empi="userInfo.empi"
      :chartInfo="liverFunctionInfo"
      id="liver_function"
    />
    <!-- <view style="height: 660rpx;"></view> -->
    <!-- </scroll-view> -->
  </view>
</template>

<script setup lang="ts">
import NewBaseInfo from './newBaseInfo.vue'
import SleepBaseInfo from './sleepBaseInfo.vue'
import BaseChart from './baseInfo.vue'
import BloodInfo from './bloodInfo.vue'
import BloodSugarInfo from './bloodSugarInfo.vue'
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { debounce } from '@/utils/tools'

const type = ref('')
const userInfo = ref({})

const scrollTop = ref(0)
const distanceArr = ref([])

const heightInfo = {
  title: '身高',
  value: 'height',
  color: '#5089FE',
  unit: '单位: cm',
  offsetX: 0,
  min: 0,
  max: 250,
  splitNumber: 5
}
const weightInfo = {
  title: '体重',
  value: 'weight',
  color: '#FF813C',
  unit: '单位: kg',
  offsetX: 0,
  min: 0,
  max: 200,
  splitNumber: 5
}
const bmiInfo = {
  title: 'BMI',
  value: 'bmi',
  color: '#1CD7AE',
  unit: '单位: kg/m²',
  offsetX: 15,
  min: 0,
  max: 100,
  splitNumber: 5,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 18.5,
        lineColor: '#1CD7AE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 23.9,
        lineColor: '#1CD7AE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}
const whrInfo = ref({
  title: '腰臀比',
  value: 'whr',
  color: '#8B89E9',
  unit: '',
  offsetX: 0,
  min: 0,
  max: 1.5,
  splitNumber: 5,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 0.85,
        lineColor: '#8B89E9',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      }
    ]
  }
})
const heartInfo = {
  title: '心率',
  value: 'heart_rate',
  color: '#0CB67C',
  unit: '单位: 次/分',
  offsetX: 20,
  min: 0,
  max: 180,
  splitNumber: 6,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 60,
        lineColor: '#0CB67C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      },
      {
        value: 100,
        lineColor: '#0CB67C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      }
    ]
  }
}
const oxygenInfo = {
  title: '血氧',
  value: 'spo2',
  color: '#50B5FE',
  unit: '单位: %',
  offsetX: 0,
  min: 0,
  max: 100,
  splitNumber: 5,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 95,
        lineColor: '#50B5FE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 100,
        lineColor: '#50B5FE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}

const ketoneInfo = {
  title: '血酮',
  value: 'blood_ketone',
  color: '#FF813C',
  unit: '单位: mmol/L',
  offsetX: 0,
  min: 0,
  max: 4,
  splitNumber: 5,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 0.03,
        lineColor: '#FF813C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelFontColor: '#FF813C',
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 0.3,
        lineColor: '#FF813C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelFontColor: '#FF813C',
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}
const uricAcidInfo = {
  title: '尿酸',
  value: 'uric_acid',
  color: '#3C5CFF',
  unit: '单位: umol/L',
  offsetX: 0,
  min: 0,
  max: 600,
  splitNumber: 5,
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 89,
        lineColor: '#3C5CFF',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelFontColor: '#3C5CFF',
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 357,
        lineColor: '#3C5CFF',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelFontColor: '#3C5CFF',
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}
const sleepInfo = {
  title: '睡眠',
  value: 'sleep',
  color: ['transparent', '#5089FE'],
  unit: '',
  // offsetX: 0,
  // yAxisType: 'value',
  splitNumber: 6,
  extra: {
    column: {
      type: 'stack',
      width: 8,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08,
      seriesGap: 0,
      meterBorder: 0,
      labelPosition: 'center',
      barBorderRadius: [4, 4, 4, 4]
    },
    tooltip: {
      showBox: true, // 显示 tooltip
      showArrow: true
    }
  }
}
const waterInfo = {
  title: '饮水',
  value: 'water',
  color: '#FF8F18',
  unit: '单位: ml',
  offsetX: 0,
  min: 0,
  max: 4000,
  splitNumber: 5,
  yAxisType: 'value',
  markLine: {
    z: 1,
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 2000,
        lineColor: '#FF8F18',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelFontColor: '#FF8F18',
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      }
    ]
  }
}
const bloodFatInfo = {
  title: '血脂',
  value: 'blood_fat',
  color: ['#0CB67C', '#EE4A4A', '#369AFF', '#FEC21D'],
  unit: '单位: mmol/L',
  offsetX: 0,
  min: 0,
  max: 6,
  splitNumber: 5,
  show: true
}
const liverFunctionInfo = {
  title: '肝功能',
  value: 'liver_function',
  color: ['#1CD7AE', '#ED5B5B', '#FF8746'],
  unit: '单位: U/L',
  offsetX: 0,
  min: 0,
  max: 60,
  splitNumber: 5,
  show: true
}

onLoad((option) => {
  console.log(option)
  type.value = option.type ? option.type : ''

  // nextTick(async () => {
  //   await getHeight('#height').then((height) => {
  //     distanceArr.value.push({ name: 'height', top: height })
  //   })
  //   await getHeight('#weight').then((height) => {
  //     distanceArr.value.push({ name: 'weight', top: height })
  //   })
  //   await getHeight('#bmi').then((height) => {
  //     distanceArr.value.push({ name: 'bmi', top: height })
  //   })
  //   await getHeight('#whr').then((height) => {
  //     distanceArr.value.push({ name: 'whr', top: height })
  //   })
  //   await getHeight('#sbp').then((height) => {
  //     distanceArr.value.push({ name: 'sbp', top: height })
  //   })
  //   await getHeight('#heart_rate').then((height) => {
  //     distanceArr.value.push({ name: 'heart_rate', top: height })
  //   })
  //   await getHeight('#fbg').then((height) => {
  //     distanceArr.value.push({ name: 'fbg', top: height })
  //   })
  //   await getHeight('#spo2').then((height) => {
  //     distanceArr.value.push({ name: 'spo2', top: height })
  //   })
  //   await getHeight('#blood_ketone').then((height) => {
  //     distanceArr.value.push({ name: 'blood_ketone', top: height })
  //   })
  //   await getHeight('#uric_acid').then((height) => {
  //     distanceArr.value.push({ name: 'uric_acid', top: height })
  //   })
  //   await getHeight('#sleep').then((height) => {
  //     distanceArr.value.push({ name: 'sleep', top: height })
  //   })
  //   await getHeight('#water').then((height) => {
  //     distanceArr.value.push({ name: 'water', top: height })
  //   })
  //   await getHeight('#blood_fat').then((height) => {
  //     distanceArr.value.push({ name: 'blood_fat', top: height })
  //   })
  //   await getHeight('#liver_function').then((height) => {
  //     distanceArr.value.push({ name: 'liver_function', top: height })
  //   })
  //   scrollTop.value = distanceArr.value.find((item) => type.value == item.name).top || 0
  // })
})
onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  whrInfo.value.markLine.data[0].value = userInfo.value.gender == '女性' ? 0.85 : 0.9

  uricAcidInfo.markLine.data[0].value = userInfo.value.gender == '女性' ? 89 : 149
  uricAcidInfo.markLine.data[1].value = userInfo.value.gender == '女性' ? 357 : 416
})

const getHeight = (str) => {
  return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery()
    query
      .select(str)
      .boundingClientRect((data) => {
        resolve(data.top)
      })
      .exec()
  })
}
</script>

<style lang="scss" scoped>
.lists {
  box-sizing: border-box;
  height: 100vh;
  padding: 24rpx 0;

  .scroll-Y {
    box-sizing: border-box;
    height: 100%;
  }
}
</style>
